<template>
  <div class="user-info">
    <el-avatar class="mr10" shape="square" :size="30" :src="avatarUrl" />
    <el-popover placement="bottom" width="300px">
      <el-row class="tac">
        <el-col :span="8">
          <p>{{ follow }}</p>
          <p>关注</p>
        </el-col>
        <el-col :span="8">
          <p>{{ followeds }}</p>
          <p>粉丝</p>
        </el-col>
        <el-col :span="8">
          <p>{{ level }}</p>
          <p>等级</p>
        </el-col>
      </el-row>
      <div class="tac">
        <el-tag class="m10">{{ gender }} {{ age }}后{{ constellation }}</el-tag>
        <el-tag class="m10">{{ mycity }}</el-tag>
        <el-tag class="m10">村岭{{ createTime }}年</el-tag>
      </div>
      <el-menu class="nb mt20">
        <el-menu-item class="flex1" @click="$router.push({path:'/userinfo'},()=>{})">
          <span>
            <el-icon>
              <Edit />
            </el-icon>
            <span class="ml10">个人信息设置</span>
          </span>
          <span>
            <el-icon>
              <ArrowRight />
            </el-icon>
          </span>
        </el-menu-item>
        <el-menu-item class="flex1" @click="handleExitLogin">
          <span>
            <el-icon>
              <SwitchButton />
            </el-icon>
            <span class="ml10">退出登录</span>
          </span>
          <span>
            <el-icon>
              <ArrowRight />
            </el-icon>
          </span>
        </el-menu-item>
      </el-menu>
      <template #reference>
        <p @click="">{{ nickname }}</p>
      </template>
    </el-popover>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/store/userInfo.js'
import { useMusicStore } from '@/store/music.js'
import { provinceAndCityData } from 'element-china-area-data'
import uitls from '@/utils/utils.js'
import {useRoute,useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
const route=useRoute()
const router=useRouter()
const userStore = useUserStore()
const musicStore=useMusicStore()
const date = uitls.formateDate(new Date(userStore.userInfo.detail.profile.birthday))
let province
let city
provinceAndCityData.forEach(item=>{
  if(item.value==userStore.userInfo.detail.profile.province){
    province=item
  }
})
province.children.forEach(item=>{
  if(item.value==userStore.userInfo.detail.profile.city){
    city=item
  }
})
const avatarUrl = computed({
  get() {
    return userStore.userInfo.detail.profile.avatarUrl
  },
})
const nickname = computed({
  get() {
    return userStore.userInfo.detail.profile.nickname
  },
})
const follow = computed({
  get() {
    return userStore.userInfo.follow.length
  },
})
const followeds = computed({
  get() {
    return userStore.userInfo.followeds.length
  },
})
const level = computed({
  get() {
    return userStore.userInfo.detail.level
  },
})
const gender = computed({
  get() {
    return {
      0: '',
      1: '男',
      2: '女',
    }[userStore.userInfo.detail.profile.gender]
  },
})
const age = computed({
  get() {
    return date.split('')[2] + '0'
  },
})
const createTime = computed({
  get() {
    return Math.floor(userStore.userInfo.detail.createDays / 365)
  },
})
const mycity = computed({
  get() {
    return province.label+" "+city.label
  },
})
const handleExitLogin=()=>{
  userStore.$reset()
  musicStore.$reset()
  if(route.path!=='/'){
    router.push({path:'/'},()=>{})
  }
  router.go(0)
  ElMessage.success('退出成功')
}
</script>

<style lang="scss">
.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    font-size: 14px;
  }
}
</style>
